<template>
  <div id="app">
    <UI />
    <Input title="手机号码" placeholder="请输入您的手机号码" @input="changeValue" />
    <Input title="验证码" placeholder="请输入短信验证码" :time="true" @input="changeValue" />
    <Input
      title="密码"
      placeholder="请输入密码"
      :password="password1"
      @changePassword="changePassword"
      @input="changeValue"
    />
    <Input
      title="确认密码"
      placeholder="请再次输入密码"
      :password="password2"
      @changePassword="changePassword"
      @input="changeValue"
    />
    <Input title="邀请码" placeholder="请填写邀请码(选填)" @input="changeValue" />
    <Button :opacity="opacity" />
  </div>
</template>

<script>
import UI from './UI.vue'
import Input from './components/Input'
import Button from './Button.vue'

export default {
  name: 'App',
  data() {
    return {
      password1: true,
      password2: true,
      opacity: 0.5,
      childrenValue: {
        '手机号码': '',
        '验证码': '',
        '密码': '',
        '确认密码': '',
        '邀请码': ''
      },
      arr: []
    }
  },
  components: {
    UI,
    Input,
    Button
  },
  methods: {
    changePassword(a) {
      if (a == '密码') {
        this.password1 = !this.password1
      } else {
        this.password2 = !this.password2
      }
    },
    changeOpacity() {
      // if(1){
      this.opacity = 1
      // }
    },
    changeValue(title, newVal) {
      this.childrenValue[title] = newVal
      if (this.childrenValue[title].length <= 0) {
        let index = this.arr.findIndex((item) => {
          return item == title
        })
        this.arr.splice(index, 1)
      } else {
        this.arr.push(title)
        this.arr = [...new Set(this.arr)]
      }
      if(this.arr.length == 5){
        this.opacity = 1
      }else{
        this.opacity = 0.5
      }
    }
  },
  mounted() {
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
